<template>
	<view class="submit-orders">
		<view class="orders-address" @click="selectAddress">
			<block v-if="submitData && submitData.length > 0 ">
				<view class="address-left">
					<view>{{submitData[0].name}}</view>
					<view>{{submitData[0].phone}}</view>
					<view>{{submitData[0].city}}{{submitData[0].address}}</view>
				</view>
			</block>
			<view class="address-right">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<view class="orders-goods" v-for="(item,index) in submitData" :key="index">
			<view class="goods-content">
				<image :src="baseUrl+'/'+item.goodsData[0].goodsImage"></image>
				<view class="goods-content-name">{{item.goodsData[0].goodsName}}</view>
				<view class="goods-content-right">
					<view>￥{{item.goodsData[0].goodsSellingPrice}}</view>
					<view>x{{item.quantity}}</view>
				</view>
			</view>
		</view>
		<view class="order-bottom">
			<view class="order-bottom-total">共{{totalNum}}件,合计<span class="total-price">￥{{totalPrice}}</span>
			</view>
			<button class="order-bottom-btn" @click="submitBtn">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from "@dcloudio/uni-app"
	import {
		computed,
		ref
	} from "vue";
	import {
		baseUrl,
		post
	} from '@/hooks/req.js'
	import {
		useUserStore,
		useCart,
		useUserAddressStore,
	} from '@/store/index';
	let useUserInfo = useUserStore()
	let userAddressInfo = useUserAddressStore()
	const submitData = ref([])
	//总数量
	let totalNum = computed(() => {
		return submitData.value.reduce((a, b) => a + b.quantity, 0)
	})
	//总价
	let totalPrice = computed(() => {
		return submitData.value.reduce((a, b) => a + b.goodsData[0].goodsSellingPrice * b.quantity, 0)
	})
	//选择的地址
	const selectAddressData = ref([])
	const selectAddress = () => {
		uni.navigateTo({
			url: '/pages/userAddress/userAddress?select=选择'
		})
		uni.$once('selectAddressData', function(data) {
			selectAddressData.value = [JSON.parse(data)]
			submitData.value.forEach(item=>{
				item.name = selectAddressData.value[0].name
				  item.phone = selectAddressData.value[0].phone
				  item.address = selectAddressData.value[0].address
				  item.city = selectAddressData.value[0].city
			})
		})
	}
	//提交订单
	const submitBtn = () => {
		const values = submitData.value.map(item => {
		  // 创建一个新对象，除了 goodsData 之外包含 item 的所有属性
		  const { goodsData, ...rest } = item;
		  return rest;
		});
		post("/orders/handle", values, uni.getStorageSync("token")).then(res => {
			uni.showToast({
				title: "购买成功",
				icon: 'success'
			})
			uni.redirectTo({
				url:"/pages/orders/orders"
			})
		})
	}
	onLoad((e) => {
		if(e.submitData){
			const params = JSON.parse(e.submitData)
		submitData.value = params
		}
		if(e.submitCartData){
			const params = JSON.parse(e.submitCartData)
			submitData.value = params
			submitData.value.forEach(item=>{
				item.name = userAddressInfo.AddressList[0].name;
				  item.phone = userAddressInfo.AddressList[0].phone;
				  item.city = userAddressInfo.AddressList[0].city;
				  item.address = userAddressInfo.AddressList[0].address;
			})
		}
		
	})
</script>

<style lang="scss" scoped>
	.submit-orders {
		height: 100vh;
		font-size: 14px;
		padding: 10px;
		background-color: #F5F5F5;

		.orders-address {
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 10px;
		}

		.orders-goods {
			margin-top: 10px;
			padding: 10px;
			background-color: #fff;
			border-radius: 10px;

			.goods-content {
				display: flex;
				justify-content: space-between;

				image {
					width: 50px;
					height: 50px;
					margin-right: 10px;
				}

				.goods-content-name {
					width: 80%;
				}

				.goods-content-right {
					text-align: right;

				}
			}
		}

		.order-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;

			.order-bottom-total {
				margin-right: 150px;

				.total-price {
					color: #ff6700;
					font-size: 16px;
				}
			}

			.order-bottom-btn {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-color: #ff6700;
				color: white;
				font-size: 14px;
				border-radius: 10px;
			}
		}
	}
</style>